<template>
  <div>
    <el-carousel height="150px">
      <el-carousel-item v-for="item in 4" :key="item">
        <el-image
          :src="require('@/assets/img/log03.png')"
          fit="scale-down"
        ></el-image>
      </el-carousel-item>
    </el-carousel>
    <table class="select" border="0" cellspacing="0">
      <tr>
        <td class="grid" @click="select('/student')">
          <table>
            <tr>
              <td rowspan="2" class="student">
                <div class="border">
                  <i class="iconfont icon-user--fill"></i>
                </div>
              </td>
              <td><div class="title_sele">学生端</div></td>
            </tr>
            <tr>
              <td><div class="state_sele">查看报修订单状态</div></td>
            </tr>
          </table>
        </td>
        <td class="grid" @click="select('/scanQT')">
          <table>
            <tr>
              <td rowspan="2" class="saoma">
                <div class="border">
                  <i class="iconfont icon-weixinsaoma"></i>
                </div>
              </td>
              <td><div class="title_sele">扫码报修</div></td>
            </tr>
            <tr>
              <td><div class="state_sele">扫描二维码报修</div></td>
            </tr>
          </table>
        </td>
      </tr>
      <tr>
        <td class="grid" @click="select('/worker')">
          <table>
            <tr>
              <td rowspan="2" class="worker">
                <div class="border">
                  <i class="iconfont icon-user-settings-fill"></i>
                </div>
              </td>
              <td><div class="title_sele">工作人员</div></td>
            </tr>
            <tr>
              <td><div class="state_sele">登陆查看报修</div></td>
            </tr>
          </table>
        </td>
        <td class="grid" @click="select('/worker/messageList')">
          <table>
            <tr>
              <td rowspan="2" class="message">
                <div class="border">
                  <i class="iconfont icon-message--fill"></i>
                </div>
              </td>
              <td><div class="title_sele">公告</div></td>
            </tr>
            <tr>
              <td><div class="state_sele">学校发布公告</div></td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
    <div class="messageRow">
      <i class="iconfont icon-gonggao"></i>
      <div>欢迎使用 FixSystem ！</div>
    </div>

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <i class="el-icon-s-data"></i>
        <span>系统资讯</span>
      </div>
      <div class="content">
        <div class="item">
          <div>学生总数：</div>
          <div>{{sysInfo.studentCount}}</div>
        </div>
        <div class="item">
          <div>工人总数：</div>
          <div>{{sysInfo.workerCount}}</div>
        </div>
        <div class="item">
          <div>已处理订单：</div>
          <div>{{sysInfo.endOrderCount}}</div>
        </div>
        <div class="item">
          <div>待处理订单：</div>
          <div>{{sysInfo.waitOrderCount}}</div>
        </div>
      </div>
    </el-card>

    <div class="footer-content">
      <div>关于我们：</div>
      <div>
        <el-link
          class="iconfont icon-github-fill"
          href="https://github.com/alsritter/FixSystem"
          target="_blank"
        ></el-link>
        <el-link
          class="iconfont icon-qq-fill"
          href="mailto:alsritter1@gmail.com"
          target="_blank"
        ></el-link>
        <el-link
          class="iconfont icon-bilibili-fill"
          href="https://www.bilibili.com/video/BV1Qp4y1e7Zz"
          target="_blank"
        ></el-link>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sysInfo: {}
    }
  },
  created() {
    this.$http
        .get('utils/get-info')
        .then(res => {
          this.sysInfo = res.data.data
        })
        .catch(() => {
          return this.$message.error('获取系统信息失败')
        })
  },
  // 选择跳转到哪个页面
  methods: {
    select(index) {
      this.$router.push(index)
    }
  }
}
</script>

<style lang='less' scoped>
.select {
  width: 100%;
  height: 200px;
  border-collapse: collapse; //表格的边框合并，如果相邻，则共用一个边框。
  border-spacing: 0px; //设置行与单元格边框的间距。
  .grid {
    width: 50%;
  }
}

.select {
  i {
    display: inline-block;
    position: relative;
    left: 50%;
    transform: translate(-50%, 18%);
    font-size: 35px;
  }
  .border {
    width: 50px;
    height: 50px;
    border: 3px solid rgb(192, 192, 192);
    border-radius: 100%;
  }
  .title_sele {
    margin-left: 5px;
    font-weight: bold;
  }
  .state_sele {
    margin-left: 5px;
    font-size: 10px;
    color: rgb(175, 175, 175);
  }

  .student {
    color: #409eff;
  }

  .saoma {
    color: #747474;
  }

  .worker {
    color: #f99e43;
  }

  .message {
    color: #c1d730;
  }
}

.messageRow {
  border-top-style: solid;
  border-top-width: 15px;
  border-top-color: #e9e9e9;
  border-bottom-style: solid;
  border-bottom-width: 50px;
  border-bottom-color: #e9e9e9;
  padding: 10px;
  i {
    color: #f68128;
    margin-right: 15px;
    margin-left: 18px;
  }
  div {
    display: initial;
  }
}

.box-card {
  position: relative;
  left: 50%;
  transform: translate(-50%, 0);
  width: 99%;
  .clearfix {
    i {
      margin-right: 15px;
      margin-left: 18px;
    }
  }

  .content {
    margin-left: 30px;
    width: 70%;
    div {
      margin-top: 5px;
    }

    .item {
      width: 100%;
      color: #475669;

      div {
        display: inline-table;
      }
      div:nth-child(1) {
        width: 80%;
        color: #979fa8;
      }
    }
  }
}

.footer-content {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  bottom: 3%;
  div:nth-child(1) {
    color: #747474;
    font-size: 10px;
  }
  div {
    display: inline-block;
    .el-link {
      margin-left: 10px;
      margin-right: 10px;
    }
  }
}
</style>
